<template>
    <span>
        <a v-if="type === 'link'" :href="href" :class="'btn '+className">{{ text }}</a>
        <button v-else-if="type === 'button'" :class="'btn '+className">{{ text }}</button>
    </span>
</template>

<script>
    export default {
        name: "Btn",
        props: {
            type: {
                type: String,
                default: "button"
            },
            href: {
                type: String,
                default: ""
            },
            className: {
                type: String,
                default: "btn"
            },
            text: {
                type: String,
                default: "Button"
            }
        }
    }
</script>

<style lang="stylus" scoped>
primary = #42b983
warning = #e7c000
danger = #c82333
.btn {
    border-radius: 2rem;
    border-style: solid;
    border-width: 1px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #ffffff;
    display: inline-block;
    font-size: 1.05rem;
    letter-spacing: 0.1rem;
    margin: 0.5rem 1rem;
    padding: 0.75em 2rem;
    text-decoration: none !important;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
    cursor: pointer;
}

.btn-warning {
    background-color: warning;
    border-color: warning;
}

.btn-primary {
    background-color: primary;
    border-color: primary;
}

.btn-danger {
    background-color: danger;
    border-color: danger;
}

.btn-primary-outline {
    border-color: primary;
    color: primary;
    background: none;
}
.btn-warning-outline {
    border-color: warning;
    color: warning;
    background: none;
}
.btn-danger-outline {
    border-color: danger;
    color: danger;
    background: none;
}
</style>
